<template>
  <ele-table-select ref="selectRef" :multiple="true" :allow-clear="true" placeholder="请选择" value-key="id"
    label-key="boxNum" v-model:value="selectedValue" :table-config="tableConfig" @select="onContainerBillSelect"
    @visible-change="search2" @remove-tag="removeTag" :overlay-style="{ width: '820px', maxWidth: '80%' }"
    :init-value="initValue" :allowClear="false">
    <!-- 角色列 -->
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'roles'">
        <a-tag v-for="item in record.roles" :key="item.roleId" color="blue">
          {{ item.roleName }}
        </a-tag>
      </template>
    </template>
    <!-- 表头工具栏 -->
    <template #toolbar>
      <advanced-search @search="search" />
    </template>
  </ele-table-select>
  <!-- <div style="margin-top: 12px">
      <a-button type="primary" @click="setInitValue">回显数据</a-button>
    </div> -->
</template>

<script setup>
import { ref, reactive, toRaw } from 'vue';
import AdvancedSearch from './advanced-search.vue';

import dayjs from 'dayjs'

import { pageContainerBills, getContainerOceanApply, saveContainerOceanApply, removeContainerOceanApply } from '@/api/order/containerBill';

// const props = defineProps({
//   modelValue: String,
// });
// 回显值
let initValue = ref([]);
const selectedValue = ref([]);

// 选择框实例
const selectRef = ref(null);

let datasource_index = true
// 表格配置
const tableConfig = reactive({
  datasource: ({ page, limit, where, orders }) => {
    if (datasource_index) {
      where.factoryPackDate = dayjs().subtract(1, 'month').format("YYYY-MM")
    }
    where.state = '对账'
    return pageContainerBills({ ...where, ...orders, page, limit });
  },
  columns: [
    // {
    //   title: 'id',
    //   key: 'id',
    //   dataIndex: 'id',
    //   width: 100,
    //   dataIndex: 'id',
    //   showSorterTooltip: false
    // },
    {
      title: '客户名称',
      key: 'customer',
      width: 100,
      dataIndex: 'customer',
      showSorterTooltip: false
    },
    {
      title: '做箱日期',
      dataIndex: 'factoryPackDate',
      width: 100,
    },

    {
      title: '提单号',
      dataIndex: 'billOfLading',
      resizable: true,
      width: 140,
      // sorter: true
    },
    {
      title: '箱号',
      dataIndex: 'boxNum',
      width: 80,
      // sorter: true
    },
  ],
  toolkit: ['reload', 'columns'],
  pageSize: 8,
  pageSizeOptions: ['8', '15', '20'],
  size: 'small',
  rowSelection: {
    columnWidth: 38,
    preserveSelectedRowKeys: true,
    fixed: 'left'
  },
  toolsTheme: 'default',
  bordered: true,
  toolStyle: {
    padding: '0 8px'
  },
  scroll: { x: 480 }
});


// document.addEventListener('mouseup' ,function () {
//     console.log(props.modelValue, JSON.stringify(props.modelValue??null));
// });


/* 初始化, 回显数据 */
const setInitValue2 = (billId_s) => {
  initValue.value = JSON.parse(billId_s ?? '[]') ?? []
};
defineExpose({ setInitValue2 })


// watch(selectedValue, (val) => {
//   console.log('selectedValue', val);
// });

// 搜索
const search = (where) => {
  datasource_index = false
  selectRef.value?.reload({
    where,
    page: 1
  });
};
const search2 = (a) => {
  if (a == true) {
    selectRef.value?.reload({});
  }
};
const removeTag = (a) => {
  let t = []
  initValue.value = initValue.value.filter(function (item, index, array) {
    // billids.push({ id: item.id, boxNum: item.boxNum })
    // console.log(item, index,array);
    if(item.id!=a){
      t.push(toRaw(item))
    }
     
  })
  initValue.value = t
  emit('dataBillids', t);
};

/* 选中事件 */
const onContainerBillSelect = (item2) => {
  let billids = []
  item2.forEach(function (item, index, array) {
    // item数组中的当前项, index当前项的索引, array原始数组；
    // console.log(item, item.id, item.boxNum);
    billids.push({ id: item.id, boxNum: item.boxNum })
  })
  initValue.value = billids
  emit('dataBillids', billids);
};

const emit = defineEmits(['dataBillids'])
</script>
